<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md8">
            @for(item in years){
            <div class="layui-card">
                <div class="layui-card-header">${item}年工时明细（时间维度）</div>
                <div class="layui-card-body" style="overflow: hidden;">
                    <div id="${item}xse" style="height: 300px;"></div>
                </div>
            </div>
            @}elsefor{
            系统中还没有您的工时信息。
            @}
        </div>
        <div class="layui-col-xs12 layui-col-md4">
            @for(item in years){
            <div class="layui-card">
                <div class="layui-card-header">${item}年工时明细（项目维度）</div>
                <div class="layui-card-body" style="height: 300px;overflow: hidden;">
                    <div id="pie${item}" style="width: 100%;height: 260px;"></div>
                </div>
            </div>
            @}
        </div>

    </div>

</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element', 'ax'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var $ax = layui.ax;
        var element = layui.element;

        // // 渲染活动情况预测
        // var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
        // var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
        // var option = {
        //     title: {
        //         text: '有望达到预期',
        //         subtext: '目标评估',
        //         textStyle: {
        //             color: '#000'
        //         }
        //     },
        //     tooltip: {
        //         trigger: "axis"
        //     },
        //     xAxis: [{
        //         type: "category",
        //         boundaryGap: !1,
        //         data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"]
        //     }],
        //     yAxis: [{
        //         type: "value"
        //     }],
        //     series: [{
        //         name: "金额",
        //         type: "line",
        //         smooth: !0,
        //         itemStyle: {
        //             normal: {
        //                 areaStyle: {
        //                     type: "default"
        //                 }
        //             }
        //         },
        //         data: mData
        //     }]
        // };
        // myCharts.setOption(option);
        //
        // // 动态改变图表1数据
        // setInterval(function () {
        //     for (var i = 0; i < mData.length; i++) {
        //         mData[i] += (Math.random() * 50 - 25);
        //         if (mData[i] < 0) {
        //             mData[i] = 0;
        //         }
        //     }
        //     myCharts.setOption({
        //         series: [{
        //             data: mData
        //         }]
        //     });
        // }, 1000);
        //
        // // 渲染券核效率图表
        // var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme);
        // var option2 = {
        //     tooltip: {
        //         formatter: "{a} <br/>{b} : {c}%"
        //     },
        //     series: [
        //         {
        //             name: '券核效率',
        //             type: 'gauge',
        //             detail: {formatter: '{value}%'},
        //             data: [{value: 80, name: '跳出率'}]
        //         }
        //     ]
        // };
        // myCharts2.setOption(option2);

        // 渲染销售额图表
    @for(item in years){
            var pie${item} = '';
            var ajaxPie = new $ax(Feng.ctxPath + "/member/projectworkhour?userId=${userId}&yearMonth=${yearMonth}", function (data) {
                pie${item} = echarts.init(document.getElementById('pie${item}'), myEchartsTheme);
                var legendData = [];
                var seriesData = [];
                for(var i = 0; i < data.data.length; i++){
                    var obj = {};
                    obj.name = data.data[i].projectName;
                    obj.value = data.data[i].sumWorkHour;
                    legendData.push(data.data[i].projectName);
                    seriesData.push(obj);
                }
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legendData
                    },
                    series: [
                        {
                            name: '花费工时',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                pie${item}.setOption(option);
            }, function (data) {
                Feng.error("图表渲染失败!" + data.responseJSON.message + "!");
            });
            ajaxPie.set("year", ${item});
            ajaxPie.start();

            var myCharts${item} = '';
            var ajax = new $ax(Feng.ctxPath + "/member/workhour?userId=${userId}&yearMonth=${yearMonth}", function (data) {
                myCharts${item} = echarts.init(document.getElementById('${item}xse'), myEchartsTheme);
                var xData = [];
                var seriesData = [];
                var seriesItem_workhour = {
                    name:"法定",
                    barMaxWidth:45,
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                };
                var seriesItem_workhour_data = [];
                var seriesItem_overtimeWorkhour = {
                    name:"加班",
                    barMaxWidth:45,
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                };
                var seriesItem_overtimeWorkhour_data = [];
                for(var i = 0; i < data.data.length; i++){
                    xData.push(data.data[i].month + '月');
                    seriesItem_workhour_data.push(data.data[i].sumWorkHour);
                    seriesItem_overtimeWorkhour_data.push(data.data[i].overtimeWorkHour);
                }
                seriesItem_workhour.data = seriesItem_workhour_data;
                seriesItem_overtimeWorkhour.data = seriesItem_overtimeWorkhour_data;
                var option3${item} = {
                    // title: {
                    //     text: '月工时明细',
                    //     textStyle: {
                    //         color: '#000',
                    //         fontSize: 14
                    //     }
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['法定', '加班']
                    },
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        seriesItem_workhour,seriesItem_overtimeWorkhour
                    ]
                };
                myCharts${item}.setOption(option3${item});
            }, function (data) {
                Feng.error("图表渲染失败!" + data.responseJSON.message + "!");
            });
            ajax.set("year", ${item});
            ajax.start();

        @}



        // 渲染访问量图表
        // var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
        // var option4 = {
        //     title: {
        //         text: '访问量趋势',
        //         textStyle: {
        //             color: '#000',
        //             fontSize: 14
        //         }
        //     },
        //     tooltip: {},
        //     grid: {
        //         left: '0',
        //         right: '0',
        //         bottom: '0',
        //         containLabel: true
        //     },
        //     xAxis: {
        //         data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        //     },
        //     yAxis: {},
        //     series: [{
        //         type: 'bar',
        //         data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
        //         barMaxWidth: 45
        //     }]
        // };
        // myCharts4.setOption(option4);

        // 切换选项卡重新渲染
        element.on('tab(tabZZT)', function (data) {
            if (data.index == 0) {
                myCharts2020.resize();
            } else {
                myCharts2019.resize();
            }
        });

        // 窗口大小改变事件
        window.onresize = function () {
        @for(item in years){
                pie${item}.resize();
                myCharts${item}.resize();
            @}
            // pie2020.resize();
            // pie2019.resize();
            // myCharts2020.resize();
            // myCharts2019.resize();
        };

    });
</script>
</body>

</html>